<template>
  <div ref="barchart" class="bar-chart"></div>
</template>

<script>
import { title } from "@/settings";
export default {
  props: {
    chartData: {
      type: Object,
      default: () => {},
    },
    stype: {
      type: String,
      default: "",
    },
  },
  watch: {
    chartData() {
      this.initChart();
    },
  },
  data() {
    return {
      chart: null,
      title: "",
      barIndex: "",
      data1: [],
      data2: [],
      barChartDataUrl: "",
    };
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = this.$echarts.init(this.$refs.barchart);
      let option = this.getOption();
      this.chart.setOption(option);
      this.barChartDataUrl = this.chart.getDataURL();
      this.chart.resize();
    },
    getOption() {
      let option = {
        animation: false,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
          },
        },
        legend: {
          left: "right",
          icon: "rect",
          itemWidth: 25, // 设置宽度
          itemHeight: 15, // 设置高度
          itemGap: 20, // 设置间距
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: this.chartData.yearList,
        },
        series: [
          {
            name: "行政",
            type: "bar",
            stack: "total",
            barMaxWidth: 80,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return "";
                  }
                },
              },
            },
            emphasis: {
              focus: "series",
            },
            data: this.chartData.adminPersonDataList,
          },
          {
            name: "单列",
            type: "bar",
            stack: "total",
            barMaxWidth: 80,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return "";
                  }
                },
              },
            },
            emphasis: {
              focus: "series",
            },
            data: this.chartData.singlePersonDataList,
          },
          {
            name: "工勤",
            type: "bar",
            stack: "total",
            barMaxWidth: 80,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return "";
                  }
                },
              },
            },
            emphasis: {
              focus: "series",
            },
            data: this.chartData.workPersonDataList,
          },
          {
            name: "事业",
            type: "bar",
            stack: "total",
            barMaxWidth: 80,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  if (params.value > 0) {
                    return params.value;
                  } else {
                    return "";
                  }
                },
              },
            },
            emphasis: {
              focus: "series",
            },
            data: this.chartData.causePersonDataList,
          },
        ],
      };

      return option;
    },
  },
};
</script>

<style lang="scss" scoped>
.bar-chart {
  width: 100%;
  height: 100%;
  margin-top: 20px;
}
</style>
